<template>
  <div class="badgewall-box">
    <div class="badge-header">
      <bottom-open-app-adv v-if="!$UA.isJM"></bottom-open-app-adv>
      <van-nav-bar
        :title="navTitle"
        left-arrow
        @click-left="toApp"
        @click-right="detail"
        class="my-nav-bar"
        v-if="$UA.isJM"
      >
        <template #right>
          <img src="../../assets/images/badge/badge-detail.png" alt="" />
        </template>
      </van-nav-bar>
    </div>
    <div class="badge" :class="badgeInfo.count ? '' : 'load-bottom'">
      <p class="inwx-nickname" v-if="userNickname">{{ userNickname }}的徽章</p>
      <div class="badge-info" v-else>
        <div class="item-num" v-if="$userInfo.uuid == uuid && badgeInfo && badgeInfo.count">
          已获得
          <span class="num">{{ badgeInfo && badgeInfo.count }}</span>
          枚徽章，超越
          <span class="num">{{ badgeInfo && badgeInfo.percent }}</span>
          的用户
        </div>
      </div>
      <div v-if="badgeInfo && badgeInfo.badges && badgeInfo.badges.length > 0" class="badge-outer">
        <div class="badge-content" :class="$userInfo.uuid == uuid ? '' : 'userwall'">
          <div class="wall-item" v-for="(item, index) in badgeInfo.badges" :key="index">
            <div class="wall-img" @click="toDetail(item)">
              <img :src="item.owned == 1 ? item.activeIcon : item.inactiveIcon" />
            </div>
            <div class="wall-title">{{ item.title }}</div>
            <div class="wall-subTitle" v-if="item.upgradeable == 1">可升级</div>
          </div>
        </div>
        <div class="describ">说明：可升级徽章仅展示最高等级</div>
      </div>
      <div
        class="nobadge-title"
        v-if="badgeInfo && badgeInfo.badges && badgeInfo.badges.length == 0"
      >
        TA还未获得徽章～
      </div>
    </div>
    <div
      class="badge-footer"
      @click="shareBadge"
      v-if="$userInfo.uuid == uuid && badgeInfo && badgeInfo.count"
    >
      晒晒我的徽章墙
    </div>
    <!-- 看别人且TA没有徽章的时候才有此按钮 -->
    <div
      class="badge-footer"
      @click="goMyWall"
      v-if="
        $UA.isJM &&
        badgeInfo &&
        badgeInfo.badges &&
        badgeInfo.badges.length == 0 &&
        uuid != $userInfo.uuid
      "
    >
      查看我的徽章墙
    </div>
    <!-- APP外部打开引导去APP内 -->
    <div class="badge-footer" v-if="!$UA.isJM && uuid" v-app-jump="{ to: scheme }">
      打开积幕发现更多
    </div>
  </div>
</template>
<script>
  import BottomOpenAppAdv from '../../components/BottomOpenAppAdv.vue';
  import { NavBar, Toast } from 'vant';
  import { mapGetters } from 'vuex';
  import mixins from 'mixins';
  import qs from 'qs';

  export default {
    mixins: [mixins],
    data() {
      return {
        badgeInfo: {},
        uuid: '',
        nickname: '',
        loading: true, //数据加载
        userInfo: '',
        isClick: true,
        badgeUserInfo: {},
      };
    },
    components: {
      BottomOpenAppAdv,
      'van-nav-bar': NavBar,
    },
    computed: {
      ...mapGetters(['$userInfo']),
      navTitle() {
        if (this.uuid === this.$userInfo.uuid) {
          return '我的徽章墙';
        }
        return 'TA的徽章墙';
      },
      userNickname() {
        if (this.uuid != this.$userInfo.uuid) {
          return this.badgeUserInfo.nickname;
        }
        return '';
      },
      scheme() {
        if (!this.uuid) return;
        return `mtjimu://homepage?uid=${this.uuid}`;
      },
    },
    watch: {
      $userInfo: {
        handler(val) {
          if (val.uuid == this.uuid) {
            this.getMyBadgeWall();
          } else {
            this.getUserBadgeWall();
          }
        },
      },
    },
    mounted() {
      this.uuid = qs.parse(window.location.search.substr(1)).uuid;
      if (!this.uuid) {
        this.$appService.toast({ msg: '缺少参数，请检查链接' });
        return;
      }
      this.getUserBadgeWall();
      // 设置标题
      this.$appService.setNav({
        title: this.navTitle,
        fullscreen: true,
        statusBarStyle: 1,
      });
      this.getOtherUserInfoDetail();
      // 刷新
      // this.$EventBus.$on('jm:hybridActive', () => {
      //   // 刷新基本信息
      //   this.getUserInfo();
      // });
    },
    methods: {
      // 返回App
      toApp() {
        this.$appService.exit();
      },
      //打开徽章体系
      detail() {
        this.$appService.openLink({
          link: 'https://ke.movtile.com/article/92?hl=1',
        });
      },
      //去徽章详情页面
      toDetail(item) {
        if (this.isClick) {
          this.isClick = false;
          if (this.$UA.isJM) {
            setTimeout(() => {
              this.$appService.openLink({
                link:
                  `https://${
                    process.env.NODE_ENV === 'development' ? 'dev-' : ''
                  }jimu-h5.movtile.com/activity/badgedetail.html?badgeId=` +
                  item.id +
                  '&uuid=' +
                  this.uuid,
              });
            }, 500);
          } else {
            setTimeout(() => {
              window.location.href = new URL(
                `badgedetail.html?badgeId=` + item.id + '&uuid=' + this.uuid,
                window.location.href,
              );
            }, 500);
          }
          setTimeout(() => {
            this.isClick = true;
          }, 1000);
        }
      },
      //获取我的徽章信息
      getMyBadgeWall() {
        if (this.$userInfo) {
          this.$service
            .UserBadgeWall({})
            .then((res) => {
              this.badgeInfo = res;
            })
            .catch((err) => {
              Toast(err.message);
            });
        } else {
          this.login();
        }
      },
      // 获取用户的徽章信息
      getUserBadgeWall() {
        this.$service
          .UserBadgeIndex({ uid: this.uuid, all: 1 })
          .then(async (res) => {
            await this.getUserInfo();
            //当前页面的的uuid != 登录用户的uuid时候才拿到该接口值
            if (this.$userInfo.uuid != this.uuid) {
              this.badgeInfo = res;
            }
          })
          .catch((err) => {
            Toast(err.message);
          });
      },
      // 站外显示徽章人昵称
      getOtherUserInfoDetail() {
        if (!this.$UA.isJM && this.uuid) {
          this.$service
            .UserInfoDetail({ uuid: this.uuid })
            .then((res) => {
              this.badgeUserInfo = res;
            })
            .catch((err) => {});
        }
      },
      //去我的徽章墙页面
      goMyWall() {
        if (this.$userInfo.nickname || this.userInfo.uuid) {
          this.openUrl();
        } else {
          this.$appService
            .login()
            .then((res) => {
              this.userInfo = res;
              this.openUrl();
            })
            .catch((err) => {
              this.$appService.toast({ msg: err });
            });
        }
      },
      openUrl() {
        var uuid = this.userInfo && this.userInfo.uuid ? this.userInfo.uuid : this.$userInfo.uuid;
        if (this.$UA.isJM) {
          setTimeout(() => {
            this.$appService.openLink({
              link:
                `https://${
                  process.env.NODE_ENV === 'development' ? 'dev-' : ''
                }jimu-h5.movtile.com/activity/badgewall.html?uuid=` + uuid,
            });
          }, 100);
        } else {
          setTimeout(() => {
            window.location.href = new URL(`badgewall.html?uuid=` + uuid, window.location.href);
          }, 100);
        }
      },
      //分享徽章墙
      shareBadge() {
        // 分情况，在app里面要用头部的话，得用openlink，不然回来会出现两个头部
        if (this.$UA.isJM) {
          setTimeout(() => {
            this.$appService.openLink({
              link:
                `https://${
                  process.env.NODE_ENV === 'development' ? 'dev-' : ''
                }jimu-h5.movtile.com/activity/sharebadge.html?type=1&uuid=` + this.uuid,
            });
          }, 500);
        } else {
          setTimeout(() => {
            window.location.href = new URL(
              `sharebadge.html?type=1&uuid=` + this.uuid,
              window.location.href,
            );
          }, 500);
        }
      },
    },
  };
</script>
<style lang="less" scoped>
  .badgewall-box {
    width: 100%;
    min-height: 100vh;
    background-color: #151826;
    &::before {
      width: 100%;
      height: 50%;
      position: absolute;
      content: '';
      background: url(../../assets/images/badge/back-circle.png) no-repeat 0 0/100%;
      background-size: contain;
    }
  }
  .badge-header,
  .badge-footer {
    position: absolute;
    width: 100%;
  }
  .badge-header {
    top: 0;
  }
  // vant 样式修改
  /deep/ .van-nav-bar {
    background-color: transparent;
    // background: blue;
    .van-nav-bar__left {
      background-image: url(../../assets/images/icon-back-arrow.png);
      background-repeat: no-repeat;
      background-size: 1.8rem;
      background-position: center;
    }
    .van-nav-bar__title {
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #ffffff;
      font-size: 1.7rem;
    }
    .van-nav-bar__arrow {
      font-size: 18px;
    }
    .van-nav-bar__right {
      img {
        width: 2.4rem;
        height: 2.4rem;
      }
    }
    .van-icon {
      color: transparent;
    }
  }
  /deep/ .van-hairline--bottom::after {
    border-bottom-width: 0px;
  }
  .my-nav-bar {
    height: 8.8rem;
    padding-top: 4.8rem;
  }
  .badge {
    width: 100%;
    position: absolute;
    top: 8.8rem;
    bottom: 0px;
    padding-bottom: 90px;
    overflow-y: scroll;
  }
  .load-bottom {
    padding-bottom: 0px;
  }
  .badge-info {
    padding: 20px 20px 0 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
    .item-num {
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(250, 250, 250, 0.5);
    }
    .num {
      font-size: 24px;
      font-family: DIN-Bold, DIN;
      font-weight: bold;
      color: #ffffff;
    }
  }
  .badge-content {
    padding: 20px 20px;
    display: grid;
    grid-template-columns: repeat(2, 50%);
    grid-row-gap: 30px;
  }
  .userwall {
    top: 126px;
  }
  .wall-detail {
    padding: 30px 15px;
    display: grid;
    grid-template-columns: repeat(2, 50%);
    grid-row-gap: 30px;
    overflow-y: auto;
    // height: 100%;
  }
  .wall-item {
  }

  .wall-img {
    position: relative;
    margin: 0 auto;
    width: 108px;
    height: 108px;
    background-size: contain;
    img {
      border-radius: 50%;
      width: 100%;
      height: 100%;
      padding: 5px;
    }
  }
  .wall-subTitle {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(250, 250, 250, 0.3);
    text-align: center;
    line-height: 20px;
    &::before {
      content: '';
      display: block;
      width: 12px;
      height: 12px;
      background: url(../../assets/images/badge/icon-to.png) no-repeat 0 0/100%;
      background-size: contain;
      padding-right: 4px;
    }
  }
  .wall-title {
    text-align: center;
    width: 85px;
    margin: 0 auto;
    margin-top: 13px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(250, 250, 250, 0.9);
    word-wrap: break-word;
  }
  .badge-footer {
    position: fixed;
    left: 0;
    right: 0;
    margin: auto;
    line-height: 46px;
    text-align: center;
    width: 191px;
    height: 46px;
    background: #131dff;
    border-radius: 3px;
    font-size: 14px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #ffffff;
    bottom: 34px;
  }
  .describ {
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(250, 250, 250, 0.8);
    line-height: 20px;
    text-align: center;
  }
  .nobadge-title {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    margin: auto;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(250, 250, 250, 0.8);
    line-height: 20px;
    text-align: center;
  }

  .inwx-nickname {
    width: 100%;
    text-align: center;
    font-size: 1.4rem;
    font-weight: 400;
    color: #ffffff;
    line-height: 2rem;
  }
</style>
